<template>
  <div>
    <yt-crud
      v-bind="options"
      ref="crudRef"
      @onLoad="getData"
      :fun-props="{
        addBtn: false,
        exportBtn: false,
        delBtn: false,
      }"
      :table-props="{
        selection: false,
        delBtn: false,
        viewBtn: false,
        editBtn: false,
        menuSlot: false,
        menu: false,
      }"
      :loading="state.loading"
      :total="state.total"
      v-model:page="state.page"
      v-model:query="state.query"
    >
      <template #rightToolbar></template>
      <template #menuSlot></template>

      <template #pack="scope:any">
        <span>{{scope.row.pack || scope.row.data }}</span>
      </template>
    </yt-crud>
  </div>
</template>

<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'

import {devLogList } from '@/api/monitor/devlog'
import YtCrud from '@/components/common/yt-crud.vue'


import {useI18n} from 'vue-i18n'

import {ComponentInternalInstance} from 'vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { InvokeDirectEnum } = toRefs<any>(proxy?.useEnum('invoke_direct_enum'))
const { t } = useI18n()

const state = reactive({
  page: {
    pageSize: 30,
    pageNum: 1,
  },
  total: 0,
  loading: false,
  query: {},
})


const column = ref<IColumn[]>([

  {
    label: t('monitor.devlog.deviceName'),
    key: 'deviceName',
    search: true,
    tableWidth: 150,
  },

  {
    label: t('monitor.devlog.invoke'),
    key: 'invoke',
    search: true,
    type: 'select',
    tableWidth: 200,
    componentProps: {
      options: InvokeDirectEnum
    }
  },
  {
    label: t('monitor.devlog.identifier'),
    key: 'identifier',
    search: true,
    tableWidth: 200,
  },

  {
    label: t('monitor.devlog.pack'),
    key: 'pack',
    slot: true,
  },
  {
    label: t('crud.table.column.createTime'),
    key: 'occurred',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    formHide: true,
  },
  {
    label: t('crud.table.column.note'),
    key: 'note',
    hide: true,
    formHide: false,
    colSpan: 22,
    componentProps: {
      type: 'textarea',
      rows: 2,
    }
  },
])
const crudRef = ref()
const data = ref<any[]>([])
const getData = () => {
  state.loading = true
  devLogList({
    ...state.page,
    ...state.query,
  })
    .then((res: any) => {
      data.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}

const options = reactive({
  ref: 'crudRef',
  data,
  column,
})
</script>

<style lang="scss" scoped></style>
